<template>
  <div class="x-container">
    <el-popover
      placement="left"
      width="800"
      trigger="manual"
      v-model="showTable"
    >
      <relation-path-item
        :radio="false"
        :show="showTable"
        :selected-data="itemTableData"
        @close="showTable = !showTable"
        @changeCheckout="checkInfos"
      />
      <el-button
        slot="reference"
        class="btn xm-btn--orange"
        icon="el-icon-plus"
        type="primary"
        @click="showTable = !showTable"
        >添加关联</el-button
      >
    </el-popover>

    <vxe-table
      border
      resizable
      show-overflow
      keep-source
      ref="xTable"
      :data="itemTableData"
      height="400"
      :edit-rules="validRules"
      :edit-config="{
        trigger: 'click',
        mode: 'cell',
        showUpdateStatus: true,
        showInsertStatus: true,
      }"
      @edit-closed="editCloseEvent"
      style="width: 100%"
    >
      <vxe-column field="itemsort" title="序号" :edit-render="{}">
        <template #edit="scope">
          <vxe-input v-model="scope.row.itemsort" type="text"></vxe-input>
        </template>
      </vxe-column>
      <vxe-column field="itemid" title="ID">
        <template #default="{ row }">
          <span>{{ row.itemid }}</span>
        </template>
      </vxe-column>
      <vxe-column field="itemname" title="点检项名称">
        <template #default="{ row }">
          <el-tooltip
            class="item"
            effect="dark"
            :content="row.itemname"
            placement="top"
            :disabled="row.itemname.length < 10"
          >
            <span>{{ row.itemname }}</span>
          </el-tooltip>
        </template>
      </vxe-column>
      <vxe-column field="zonename" title="区域">
        <template #default="{ row }">
          <el-tooltip
            class="item"
            effect="dark"
            :content="row.zonename"
            placement="top"
            :disabled="row.zonename.length < 10"
          >
            <span>{{ row.zonename }}</span>
          </el-tooltip>
        </template>
      </vxe-column>
      <vxe-column title="操作" width="100">
        <template #default="{ row }">
          <span class="xm-text-btn primary" @click="handleUpdateItem(row)"
            >编辑</span
          >
          <span class="xm-text-btn primary" @click="deletePathItemEvent(row)"
            >删除</span
          >
        </template>
      </vxe-column>
    </vxe-table>

    <!-- 点检项编辑 -->
    <path-item-create
      :visible="isItemUpdate"
      @close="close"
      :detail="detailData"
      :action="action"
    />
  </div>
</template>

<script>
import RelationPathItem from "./RelationPathItem.vue";
import PathItemCreate from "@/views/pathItem/Create.vue";
import { deletePathItemByPathAPI, addPathItemByPathAPI } from "@/api/pathLine";
export default {
  name: "RelationTable",

  props: {
    listdata: { type: Array },
    pathid: { type: String, Number },
  },

  components: {
    RelationPathItem,
    PathItemCreate,
  },

  data() {
    return {
      showTable: false,
      itemTableData: [],
      /**rules */
      validRules: { itemsort: [{ required: true, message: "请输入序号" }] },
      /**点检项编辑 */
      isItemUpdate: false,
      detailData: {},
      action: {
        type: "update",
        data: {},
      },
    };
  },

  mounted() {},

  watch: {
    listdata: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.itemTableData = [].concat(newVal);
        }
      },
    },
  },

  methods: {
    checkInfos(selectData) {
      this.itemTableData = selectData;
    },

    /**添加路径下的点检项*/
    editCloseEvent({ row, rowIndex }) {
      const data = this.itemTableData[rowIndex];
      if (!!row.itemsort) {
        addPathItemByPathAPI({
          pathid: this.pathid,
          itemid: data.itemid,
          itemsort: row.itemsort,
        }).then((res) => {
          this.$message.success("关联成功");
        });
      } else {
        this.$message.error("请完善内容");
      }
    },

    /**删除路径下的点检项 */
    deletePathItemEvent(item) {
      deletePathItemByPathAPI({ piid: item.piid }).then((res) => {
        if (res.Status == 1) {
          this.$message.success("删除成功");
          this.$emit("update", item.pathid);
        }
      });
    },

    /**编辑点检项 */
    handleUpdateItem(item) {
      this.isItemUpdate = true;
      this.detailData = item;
    },

    /**点检项弹窗 */
    close() {
      this.isItemUpdate = false;
      this.detailData = {};
    },

    /**刷新点检项 */
    refresh() {
      this.isItemUpdate = false;
      this.$emit("update", this.detailData.pathid);
    },
  },
};
</script>

<style lang="scss" scoped>
.x-container {
  text-align: right;
  .btn {
    margin-bottom: 10px;
    margin-right: 10px;
  }
}
::v-deep {
  .vxe-table--main-wrapper {
    font-size: 13px;
  }
}
</style>
